<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/19
  Time: 8:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="/static/js/vue.js"></script>
    <script type="text/javascript" src="/static/js/axios.min.js"></script>
</head>
<body>
<h1>index</h1>

<div id="app">
    <h2>{{msg}}</h2>
    <input type="text" name="empid" id="empid" v-model="emp.id"/>
    <input type="text" name="empname" id="empname" v-model="emp.username"/>
    <input type="button" value="getAll" id="getAll" @click="getAll">
    <input type="button" value="insert" id="insert" @click="insert">

    <table>
        <thead>
        <tr>
            <th>id</th>
            <th>username</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="e in emps ">
            <td>{{e.id}}</td>
            <td>{{e.username}}</td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "hello",
            emps: [],
            emp: {
                id: 0,
                username: ""
            }

        },
        methods: {
            getAll() {
                axios.get("/getAll")
                    .then(function (result) {
                        console.log(result)
                        if (result.data.code == 200) {
                            vm.emps = result.data.result
                        } else {
                            alert(result.data.msg)
                        }

                    })
            },
            insert() {
                axios.post("/insert", vm.emp).then(r => alert(r.data.msg))
            }
        }
    });
</script>
</body>
</html>
